<template>
  <div class="addaddress">
    <div class="item">
      <input type="text" placeholder="姓名" v-model="userName" />
    </div>
    <div class="item">
      <input type="text" placeholder="手机号码" v-model="telNumber" />
    </div>
    <div class="item">
      <picker mode="region" @change="bindRegionChange" :value="region" :custom-item="customItem">
        <input type="text" placeholder="身份、城市、区县" v-model="address" />
      </picker>
    </div>
    <div class="item">
      <input type="text" placeholder="详细地址、如街道、门牌号" v-model="detailAddress" />
    </div>
    <div class="item itemend">
      <!--checkbox 只支持change事件  -->
      <checkbox-group @change="checkboxChange">
        <label for="c" class="checkbox">
          <checkbox class="box" value="true" id="c" :checked="checked" color="#b4282d"></checkbox>设置为默认地址
        </label>
      </checkbox-group>
      <div @click="wxaddress">一键导入微信</div>
    </div>
    <div class="bottom" @click="saveAddress">保存</div>
  </div>
</template>

<script>
import { get, post, getStorageOpenId } from "../../utils/index";
export default {
  data() {
    return {
      openId: "",
      userName: "",
      telNumber: "",
      address: "",
      region: [],
      //-默认在每一列顶部展示的内容
      customItem: "全部",
      detailAddress: "",
      res: "",
      id: "",
      checked: false
    };
  },
  mounted() {
    this.openId = getStorageOpenId();
    //=判断传递过来的参数，新建页面不需要参数，修改地址有个id参数，一键导入微信有个res参数
    if (this.$root.$mp.query.res) {
      this.res = JSON.parse(decodeURIComponent(this.$root.query.res));
      //-如果是微信导入的地址，需要将页面的input中显示微信的地址
      this.userName = this.res.userName;
      this.telNumber = this.res.telNumber;
      this.address = `${this.res.proviceName}${this.res.cityName}${
        this.res.countryName
      } `;
      this.detailAddress = this.res.detailInfo;
    }
    //=如果是从编辑按钮点过来的
    if (this.$root.$mp.query.id) {
      this.id = this.$root.$mp.query.id;
      //-拿到id去向数据库做请求
      this.getDetail();
    }
  },
  methods: {
    //checkbox 是有默认参数的
    checkboxChange(e) {
      this.checked=e.mp.detail.value[0]
    },
    //-picker中，只要有input发生变化，就会触发bindRegionChange事件，这个事件也是有默认参数的
    bindRegionChange(e){
     let value=e.mp.detail.value
     this.address=`${value[0]} ${value[1]} ${value[2]}`
    },
    wxaddress() {
      wx.chooseAddress({
        success: (result)=>{
          //? 这个reslut是定死的么？ 为什么一直是张三？
          console.log(result);
          this.userName=result.userName
          this.telNumber=result.telNumber
          this.address=`${result.provinceName} ${result.cityName} ${result.countyName}`
          this.detailAddress=result.detailInfo
        },
        fail: ()=>{},
        complete: ()=>{}
      });
    },
    async saveAddress() {
      const data = await post("/address/saveAction", {
        userName: this.userName,
        telNumber: this.telNumber,
        address: this.address,
        detailAddress: this.detailAddress,
        checked: this.checked,
        openId:this.openId,
        addressId:this.id
      });
      console.log(data);
      if (data.data) {
        wx.showToast({
          title: '添加成功',
          icon: 'success',
          image: '',
          duration: 1500,
          mask: true,
          success: (result)=>{
            setTimeout(() => {
              wx.navigateBack({
              delta: 1
            });
            }, 2000);
          },
          fail: ()=>{},
          complete: ()=>{}
        });
      }
    },
    async getDetail() {
      const data = await get("/address/detailAction", {
        id: this.id
      });
      let detail = data.data;
      this.userName = detail.name;
      this.telNumber = detail.mobile;
      this.address = detail.address;
      this.detailAddress = detail.address_detail;
      //-判断是不是从默认地址点过来的，如果是 进入的页面框里应该打上勾
      this.checked = detail.is_default == 1 ? true : false;
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./style.less");
</style>